<script setup lang="ts">
import { Ref, onMounted, ref } from 'vue'
import { useHomeTitle } from '@/events/title'
import HomeBanner from './components/HomeBanner.vue'
import { Banners } from '@/ts/interfaces/banner.interfaces'

import { useI18n } from 'vue-i18n'
import { URL_HOME, URL_API } from '@/data/constants'

const { t } = useI18n()

//Title
useHomeTitle(t('home.name'))

//Home data
interface HomeData {
  banners: Banners
}

const loaded = ref(false)
const errMsg: Ref<string | null> = ref(null)
const homeData: Ref<HomeData | null> = ref(null)

onMounted(() => {
  loaded.value = false
  fetch(URL_HOME)
    .then(response => response.json())
    .then(data => {
      // console.log(data)
      if (data.state === 200) {
        homeData.value = data.data
      }
    })
    .catch((reason) => {
      console.error('Can\'t load data:', reason)
      errMsg.value = reason.toString()
    })
    .finally(() => {
      loaded.value = true
    })
})

</script>

<template>
  <v-container class="py-0">
    <!-- Alerts -->
    <v-alert class="my-4" v-if="errMsg" title="Load error" :text="errMsg" type="error" variant="tonal" />
  </v-container>
  <!-- MainLayout -->
  <HomeBanner class="my-4" v-if="homeData" :banners="homeData.banners" :base-url="URL_API" />
  <!-- Loading -->
  <div v-if="!loaded" class="centerSpace">
    <v-progress-circular indeterminate :size="40" :width="4" />
  </div>
</template>


<style scoped></style>
